<script setup>
import {reactive, ref, toRaw} from 'vue';
import axios from "axios";
import {message} from "ant-design-vue";
import server from "../../config/server.js";

const formRef = ref();
const labelCol = {
  span: 5,
};
const wrapperCol = {
  span: 13,
};

const formState = reactive({
  problem: '',
  A: '',
  B: '',
  C: '',
  D: '',
  answer: '',
});

const rules = {
  problem: [
    {
      required: true,
      message: '问题不能为空',
      trigger: 'change',
    },
    {
      min: 6,
      max: 255,
      message: '问题长度应该在6-255个字符之间',
      trigger: 'blur',
    },
  ],
  A: [
    {
      required: true,
      message: 'A答案不能为空',
      trigger: 'change',
    },
    {
      min: 2,
      max: 255,
      message: '答案长度应该在2-255个字符之间',
      trigger: 'blur',
    },
  ],
  B: [
    {
      required: true,
      message: 'B答案不能为空',
      trigger: 'change',
    },
    {
      min: 2,
      max: 255,
      message: '答案长度应该在2-255个字符之间',
      trigger: 'blur',
    },
  ],
  C: [
    {
      required: true,
      message: 'C答案不能为空',
      trigger: 'change',
    },
    {
      min: 2,
      max: 255,
      message: '答案长度应该在2-255个字符之间',
      trigger: 'blur',
    },
  ],
  D: [
    {
      required: true,
      message: 'D答案不能为空',
      trigger: 'change',
    },
    {
      min: 2,
      max: 255,
      message: '答案长度应该在2-255个字符之间',
      trigger: 'blur',
    },
  ],
  answer: [
    {
      required: true,
      message: '正确答案不能为空',
      trigger: 'change',
    },
    {
      min: 1,
      max: 1,
      message: '答案应该是A、B、C、D中的某个字符',
      trigger: 'blur',
    },
  ]
};

// submit the form data to server
const onSubmit = () => {
  formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState));
        axios({
          method: 'post',
          url: `${server.apiBaseUrl}/zdppy_ampractice_problem`,
          data: toRaw(formState)
        }).then(res => {
          console.log("add res = ", res);
          resetForm()
          message.success("add the problem successfully!")
        })

      })
      .catch(error => {
        console.log('error', error);
      });
};
const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<template>
  <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
  >
    <a-form-item ref="name" label="问题" name="problem">
      <a-input v-model:value="formState.problem"/>
    </a-form-item>
    <a-form-item ref="name" label="A" name="A">
      <a-input v-model:value="formState.A"/>
    </a-form-item>
    <a-form-item ref="name" label="B" name="B">
      <a-input v-model:value="formState.B"/>
    </a-form-item>
    <a-form-item ref="name" label="C" name="C">
      <a-input v-model:value="formState.C"/>
    </a-form-item>
    <a-form-item ref="name" label="D" name="D">
      <a-input v-model:value="formState.D"/>
    </a-form-item>
    <a-form-item ref="name" label="答案" name="answer">
      <a-input v-model:value="formState.answer"/>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 14, offset: 5 }">
      <a-button type="primary" @click="onSubmit">新增</a-button>
      <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
    </a-form-item>
  </a-form>
</template>